<template>
  <div>
    <!-- 父传子 -->
    <!-- 一个组件向另外一个组件传递数据 -->
    <!-- 作为自定义标签使用 -->
    <!--1. 通过父组件内的子组件上 通过自定义属性传值 -->
    <!-- <MyProduct title="西瓜,大西瓜" price="10元" info="不甜不要钱"/> -->
    <!-- 2 动态绑定vue数据变量 -->
    <!-- <MyProduct :title="title" :price="price" :info="info"/> -->
    <!-- 3.配合v-for列表渲染 -->
    <!-- 子传父 -->
    <!-- 父监听子派发过来的事件 -->
    <MyProduct v-for="(item,index) in list" 
    :key="item.id" 
    :title="item.proname"
    :price="item.proprice"
    :info="item.info"
    :index="index"
    @lowerPrice1="lowerPrice2"
    />
  </div>
</template>

<script>
//导入组件
import MyProduct from "./components/MyProduct.vue";
export default {
  // 注册
  components: {
    MyProduct,
  },
  data(){
   return{
      title:'西瓜,大西瓜',
      price:10,
      info:'甜',
       list: [
        {
          id: 1,
          proname: "超级好吃的棒棒糖",
          proprice: 18.8,
          info: "开业大酬宾, 全场8折",
        },
        {
          id: 2,
          proname: "超级好吃的大鸡腿",
          proprice: 34.2,
          info: "好吃不腻, 快来买啊",
        },
        {
          id: 3,
          proname: "超级无敌的冰激凌",
          proprice: 14.2,
          info: "炎热的夏天, 来个冰激凌了",
        },
      ],
   }

  },
  methods:{
    //从子组件传过来的索引
    lowerPrice2(i){
      //找到数组中对应索引的对象,改变其价格
      this.list[i].proprice--
    }
  }
};
</script>

<style>
</style>